<template>
  <page-meta :page-style="'overflow:'+(showPopup ? 'hidden' : 'visible')"></page-meta>
  <view class="container">
    <login-bar :top="-20"></login-bar>
    <view v-if="pageData.noExistent === 1" style="margin-top: 20vh">
      <EmptyBox title="活动已下线" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png" color="#414141"></EmptyBox>
      <view class="u-center" style="font-weight:bold;margin-top:20rpx">
        您可以看看 <text @click="gotoActivity" style="color:#324894;padding:0 20rpx">其他活动</text>
      </view>
    </view>
    <template v-else>
      <view class="rank-box" v-if="pageData.timeStatus?.status !== 1">
        <view>
          我的助力值：
          <text v-if="!customerId" style="color:#324894" @click="gotoLogin">登录查看</text>
          <text v-if="customerId">{{ pageData.assistanceValue }}</text>
        </view>
        <view class="right u-center">
          <view class="chart" @click="openRankPopup('rank')">
            排行榜
          </view>
          <view class="line"></view>
          <view class="chart" @click="openRankPopup('record')">
            明细
          </view>
        </view>
      </view>
      <view class="swiper-padding">
        <swiper
          class="swiper"
          circular
          :current="currentSwiper"
          @change="(e) => currentSwiper = e.target.current"
          autoplay>
          <swiper-item class="swiper-item" v-for="(item, index) in pageData.bannerImageList" :key="index">
            <image class="introduce_img" :src="item"></image>
          </swiper-item>
        </swiper>
        <view class="dots">
          <view class="dots-item" v-for="(item, index) in pageData.bannerImageList" :key="index" :class="currentSwiper === index ? 'active' : ''"></view>
        </view>
        <view class="view-title">
          {{ pageData.activityName }}
        </view>
      </view>
      <view class="view-base-rules">
        <ParseSelf :content="pageData.description"></ParseSelf>
      </view>
      <view class="booking_div">
        <view @click="eventSubscribe(false)" class="opt-btn">
          <image class="share-image" src="https://img.qumoyugo.com/webimgbg/avtivity_detail_subscript_icon.svg"></image>
          活动订阅
        </view>
        <view class="booking">
          <template v-if="pageData.timeStatus">
            <view v-if="pageData.timeStatus.status !== 3" class="u-center" style="flex-direction:column;flex: 1;flex:1;">
              <view>{{pageData.timeStatus?.status === 1 ? '距活动开始还剩' : '距开奖还剩'}}</view>
              <view>
                <uni-countdown :day="countdownTime.day" :hour="countdownTime.hour" :minute="countdownTime.minute" :second="countdownTime.second" :start="countdownTime.start" @timeup="timeup" color="#FCDBAB" splitorColor="#FCDBAB" :font-size="12"></uni-countdown>
              </view>
            </view>
          </template>
          <view v-if="pageData.timeStatus?.status === 3" style="flex-direction:column;flex: 1;flex:1;" class="u-center">
            <view :style="{fontSize: customerId ? '11px' : '30rpx' }">
              {{ customerId ? pageData.prize ? `恭喜您` : '很遗憾' : '已开奖'}}
            </view>
            <view>
              {{ customerId ? pageData.prize ? `获得${pageData.prize}` : '您不在获奖名单内' : '' }}
            </view>
          </view>
          <view class="sbtn u-center" @click="involveActivity" v-if="pageData.timeStatus?.status === 2">
            邀请助力
          </view>
          <view class="sbtn u-center" @click="involveActivity" v-if="pageData.timeStatus?.status === 3">
            <image class="animate__pulse" v-if="customerId && pageData.prize" src="https://img.qumoyugo.com/img/T6Y987SDU4KLAIWJKK6WC1710403794101.gif"></image>
            {{ customerId ? pageData.prize ? '联系领奖' : '去看看其他活动' : '登录看看' }}
          </view>
          <button class="natv-button sbtn u-center" style="font-size:30rpx;color: #fff;" open-type="share" v-if="pageData.timeStatus?.status === 1">
            分享
          </button>
        </view>
      </view>
    </template>
    <canvas style="width: 750px;height: 1250px;opacity: 0;" canvas-id="firstCanvas" id="canvasImg"></canvas>
    <uni-popup ref="popupPrize" type="center" :is-mask-click="false">
      <view class="popup-prize">
        <view class="img-anim">
          <img src="https://img.qumoyugo.com/img/DADUBQ8ROPNHK3SSBGK1L1710398638791.gif" style="width:300rpx;height:384rpx">
        </view>
        <view class="circle" :class="isShowPrize ? 'show' : ''"></view>
        <view class="main-prize" :class="isShowPrize ? 'show' : ''">
          <view class="text">{{ pageData.prize }}</view>
          <image src="https://img.qumoyugo.com/img/H8TW27YTIFP617TE5CCY1710229072393.png" style="width: 674rpx;height: 760rpx;" show-menu-by-longpress></image>
        </view>
        <img src="https://img.qumoyugo.com/img/EJJ4F9RL2R0UM61RIR5SN1710143189449.png" class="close" :class="isShowPrize ? 'show' : ''" @click="() => popupPrize.close()">
      </view>
    </uni-popup>
    <uni-popup ref="rankPopup" type="bottom" :safe-area="false" @change="(e) => showPopup = e.show">
      <view class="popup-content" :style="{backgroundImage: `url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_bg_top_${currentSelectPopup}.png)`}">
        <view class="main-box" :class="currentSelectPopup === 'rank' ? 'rank-btm' : ''">
          <view class="title">
            {{ currentSelectPopup === 'rank' ?'排行榜' : '助力明细' }}
          </view>
          <view class="close" @click="() => rankPopup.close()"></view>
          <template v-if="currentSelectPopup === 'rank'">
            <scroll-view class="rank-list" @scrolltolower="scrolltolower('rank')" :style="{height: rankParmas.total <= 1 ? '400rpx' : '50vh'}" scroll-y v-if="rankParmas.total !== 0">
              <view class="self-box item u-center">
                <view class="row">
                  {{ rankParmas.myOwner.rowNum || '无排名' }}
                </view>
                <view class="user-info">
                  <image :src="rankParmas.myOwner.customerAvatar" class="avatar"></image>
                  <view>
                    <view class="u-line-1" style="width: 200rpx;">{{ rankParmas.myOwner.customerNickname }}</view>
                    <view style="font-weight:normal;color:#414141;font-size:22rpx">
                      我自己(ID:{{ rankParmas.myOwner.customerId }})
                    </view>
                  </view>
                </view>
                <image src="https://img.qumoyugo.com/img/MPSKP3V7L3JCGNFD9NON1710143297877.png" style="width: 95rpx;height: 80rpx;" v-if="pageData.timeStatus.status === 3 && rankParmas.myOwner.prize"></image>
                <view class="assis">
                  <view v-if="pageData.timeStatus.status === 3" style="font-size:26rpx">
                    {{ rankParmas.myOwner.prize || '未获奖' }}
                  </view>
                  <view>助力值 {{ rankParmas.myOwner.assistanceValue }}</view>
                </view>
              </view>
              <view class="item u-center" v-for="rank in rankParmas.list" :key="rank.id">
                <view class="row">
                  {{ rank.rowNum }}
                </view>
                <view class="user-info">
                  <image :src="rank.customerAvatar" class="avatar"></image>
                  <view style="max-width: 220rpx" class="u-line-1">{{ rank.customerNickname }}</view>
                </view>
                <view class="assis">
                  <view v-if="rank.prize" style="font-size:26rpx">
                    {{ rank.prize || '一等奖' }}
                  </view>
                  <view>
                    助力值 {{ rank.assistanceValue }}
                  </view>
                </view>
              </view>
            </scroll-view>
            <view style="margin: 40rpx 0;" v-if="rankParmas.total === 0">
              <EmptyBox title="暂无数据" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png" color="#414141"></EmptyBox>
            </view>
          </template>
          <template v-if="currentSelectPopup === 'record'">
            <scroll-view class="rank-list" @scrolltolower="scrolltolower('record')" :style="{height: recordParmas.total <= 2 ? '400rpx' : '50vh'}" scroll-y v-if="recordParmas.total !== 0">
              <view class="help-list">
                <dl class="help-title">
                  <dt class="name">助力人</dt>
                  <dt class="time">助力时间</dt>
                  <dt class="num">助力值</dt>
                </dl>
                <dl class="help-item" v-for="record in recordParmas.list" :key="record.id">
                  <dd class="name u-line-1">{{ record.beInvitedCustomerNickname }}</dd>
                  <dd class="time">{{ record.createdAt }}</dd>
                  <dd class="num">+{{ record.assistanceValue }}</dd>
                </dl>
                <dl class="help-item" v-if="recordParmas.total === 0" style="color: #999">
                  <dd style="flex:1;text-align:center;padding-right:80rpx">暂无助力明细</dd>
                </dl>
              </view>
            </scroll-view>
            <view style="margin: 40rpx 0;" v-if="recordParmas.total === 0">
              <EmptyBox title="暂无数据" img="https://img.qumoyugo.com/webimgbg/pets-no-data-product.png" color="#414141"></EmptyBox>
            </view>
          </template>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="operatePopup" type="bottom" @maskClick="closeOperatePopup" :safe-area="false" @change="(e) => showPopup = e.show">
      <view class="popup-content" style="background-image: url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_bg_top_record.png);">
        <view class="main-box">
          <view class="liji-it" v-if="currentOperatePopup === 'poster'">
            <view class="cont">
              <button class="natv-button" open-type="share" style="background-color: transparent;">
                <img src="https://img.qumoyugo.com/webimgbg/pet-activit-share-wx-n.png" style="width: 80rpx;height: 80rpx;margin-bottom:10rpx">
                <view>好友助力</view>
              </button>
              <button class="natv-button" style="background-color: transparent;" @click="handleShareImgMp">
                <img src="https://img.qumoyugo.com/webimgbg/pet-activit-share-pic-n.png" style="width: 80rpx;height: 80rpx;margin-bottom:10rpx">
                <view>扫码助力</view>
              </button>
            </view>
            <view class="poster-img" v-if="showPoster">
              <image :src="imagePostUrl" style="height:100%;width:100%"></image>
            </view>
          </view>
          <view class="btn-cancle u-center">
            <view style="padding: 30rpx 0;width: 300rpx" @click="closeOperatePopup">
              取消
            </view>
            <view class="download u-center" @click="saveImage" v-if="showPoster">
              <img src="https://img.qumoyugo.com/webimgbg/picopino_icon_download_friend_nwlf.png" style="width:25rpx;height:22rpx;margin-right:10rpx">
              下载
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <uni-popup ref="contactPopup" type="center">
      <view style="display:flex;flex-direction:column;align-items: center;">
        <image style="width:506rpx;height:543rpx" src="https://img.qumoyugo.com/img/Q1EWCCYBFOGQRSTAPMSTX1710143140371.png" show-menu-by-longpress></image>
        <img src="https://img.qumoyugo.com/img/EJJ4F9RL2R0UM61RIR5SN1710143189449.png" style="width:70rpx;height:70rpx" @click="() => contactPopup.close()">
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, getCurrentInstance, computed } from 'vue'
import { urlGetObj, base64ToSave, urlParams, storage } from '@/utils/utils'
import { onLoad, onShareAppMessage, onShow, onPullDownRefresh } from '@dcloudio/uni-app'
import { ACTIVITY_ADDED_PET_INFO, SHOW_TAB_TYPE, TOKEN } from '@/assets/js/config'
import { useStore } from '@/store'
import EmptyBox from '@/components/emptyBox'
import ParseSelf from '@/components/parseSelf'
const { $https, $subscribeMessage } = getCurrentInstance().appContext.config.globalProperties
const store = useStore()
const imagePostUrl = ref('')
const showPoster = ref(false)
const optionsData = ref({})
const pageData = ref({})
const isShowPrize = ref(false)
const currentSwiper = ref(0)
const popupPrize = ref()
const isSubscribe = ref(false)
const countdownTime = ref({
  day: 0,
  hour: 0,
  minute: 0,
  second: 0,
  start: false
})
const recordParmas = ref({
  list: [],
  page: 0,
  more: true,
  total: -1,
  totalAssistance: 0
}) // 活动明细列表
const rankParmas = ref({
  list: [],
  page: 0,
  more: true,
  total: -1,
  myOwner: 0
}) // 活动排行列表
const rankPopup = ref() // 数据明细
const operatePopup = ref() // 弹框
const contactPopup = ref() // 弹框
const currentSelectPopup = ref('')
const currentOperatePopup = ref('')
const showPopup = ref(false)
const pageOwnerId = ref('')
const customerId = computed(() => {
  return store.state.profile?.attr?.customerId
})
onShareAppMessage(() => {
  let path = ''
  let promise = ''
  if (pageData.value.timeStatus.status === 2) {
    if (!pageOwnerId.value) {
      promise = new Promise(resolve => {
        $https({
          url: '/activityInfo/owner',
          type: '',
          method: 'post',
          data: {
            activityId: optionsData.value.id
          }
        }).then(res => {
          if (res.code === 0) {
            pageOwnerId.value = res.data
            resolve({
              title: pageData.value.activityName,
              path: `/events/marketFriend?activityOwnerId=${pageOwnerId.value}&entryType=2`,
              imageUrl: pageData.value.assistCardImage
            })
          }
        })
      })
    } else {
      path = `/events/marketFriend?activityOwnerId=${pageOwnerId.value}&entryType=2`
    }
  }
  return {
    title: pageData.value.activityName,
    path,
    imageUrl: pageData.value.assistCardImage || '',
    promise
  }
})
onLoad(options => {
  optionsData.value = options
})
onShow(async () => {
  if (optionsData.value.scene) {
    const res = await $https({
      url: `/common/param/${optionsData.value.scene}`,
      type: ''
    })
    if (res.code === 0) {
      optionsData.value = urlGetObj(res.data)
    }
  }
  getInt()
})
onPullDownRefresh(() => {
  getInt()
  setTimeout(() => {
    uni.stopPullDownRefresh()
  }, 800)
})
const getInt = () => {
  const data = {}
  if (optionsData.value.preview) {
    data.preview = optionsData.value.preview
  }
  $https({
    url: `/activityInfo/${optionsData.value.id}`,
    type: '',
    data
  }).then(res => {
    if (res.code === 0) {
      pageData.value = res.data
      if (res.data.timeStatus.status === 2) {
        getCountdownTime(res.data.serverTime, res.data.endTime)
      }
      if (res.data.timeStatus.status === 1) {
        getCountdownTime(res.data.serverTime, res.data.startTime)
      }
      if (storage.get(ACTIVITY_ADDED_PET_INFO)) {
        uni.showToast({
          title: '添加成功，可到“我的”页查看宠物',
          icon: 'none'
        })
        currentOperatePopup.value = 'poster'
        operatePopup.value && operatePopup.value.open()
        storage.remove(ACTIVITY_ADDED_PET_INFO)
      }
      if (res.data.needAddPet || !storage.get(TOKEN)) {
        uni.hideShareMenu()
      } else {
        uni.showShareMenu()
      }
      // 时间状态：1.活动未开始 2.活动倒计时 3.活动已结束
      if (res.data.timeStatus.status === 3 && res.data.popup) {
        popupPrize.value.open()
        setTimeout(() => {
          isShowPrize.value = true
        }, 1000)
      }
    } else {
      pageData.value.noExistent = 1 // 1表示不存在
    }
  })
}
const getSelfPoster = () => {
  if (!pageOwnerId.value) {
    $https({
      url: '/activityInfo/owner',
      type: '',
      method: 'post',
      data: {
        activityId: optionsData.value.id
      }
    }).then(res => {
      if (res.code === 0) {
        pageOwnerId.value = res.data
      }
    })
  }
}
// 跳转登录
const gotoLogin = () => {
  uni.reLaunch({
    url: `/pages/login?redirect=${encodeURIComponent('/events/eventsMarket?')}${urlParams(optionsData.value)}`
  })
}
// 生成二维码
const handleShareImgMp = async () => {
  if (imagePostUrl.value) {
    showPoster.value = true
    return false
  }
  uni.showLoading({
    title: '生成中...'
  })
  // 请求小程序二维码
  $https({
    url: '/qr-code',
    type: '',
    data: {
      scene: 'mp4',
      page: 'events/marketFriend',
      param: `entryType=2&activityOwnerId=${pageOwnerId.value}`
    }
  }).then(async res => {
    if (res.code === 0) {
      const base64Url = 'data:image/png;base64,' + res.data
      const urlQR = await base64ToSave(base64Url)
      const ctx = uni.createCanvasContext('firstCanvas')
      uni.downloadFile({
        url: pageData.value.assistPosterImage,
        success: (res) => {
          if (res.statusCode === 200) {
            const x = 484
            const y = 1018
            const width = 218
            const height = 218
            const cornerSize = 20
            // 画矩形
            ctx.drawImage(res.tempFilePath, 0, 0, 750, 1250)
            ctx.beginPath()
            ctx.moveTo(x + cornerSize, y)
            ctx.arcTo(x + width, y, x + width, y + cornerSize, cornerSize)
            ctx.lineTo(x + width, y + height - cornerSize)
            ctx.arcTo(x + width, y + height, x + width - cornerSize, y + height, cornerSize)
            ctx.lineTo(x + cornerSize, y + height)
            ctx.arcTo(x, y + height, x, y + height - cornerSize, cornerSize)
            ctx.lineTo(x, y + cornerSize)
            ctx.arcTo(x, y, x + cornerSize, y, cornerSize)
            ctx.closePath()
            ctx.fillStyle = '#fff'
            ctx.setLineWidth(1)
            ctx.strokeStyle = '#fff'
            ctx.fill()
            ctx.stroke()
            ctx.drawImage(urlQR, 490, 1024, 204, 204)
            ctx.draw(false, () => {
              uni.canvasToTempFilePath({
                canvasId: 'firstCanvas',
                success: (resF) => {
                  uni.hideLoading()
                  imagePostUrl.value = resF.tempFilePath
                  showPoster.value = true
                },
                fail: (res) => {
                  uni.hideLoading()
                }
              })
            })
          }
        },
        fail: (res) => {
          console.log('下载失败downloadFile', res)
        }
      })
    } else {
      uni.hideLoading()
    }
  })
}
// 保存图片
const saveImage = () => {
  wx.saveImageToPhotosAlbum({
    filePath: imagePostUrl.value,
    success: () => {
      uni.showToast({
        title: '已保存到相册',
        icon: 'none'
      })
    },
    fail: () => {
      console.log('erro')
    }
  })
}
const closeOperatePopup = () => {
  showPoster.value = false
  operatePopup.value.close()
}
// 倒计时
const timeup = () => {
  optionsData.value.id && getInt()
}
// 参与明细
const getInvolvedDetail = () => {
  $https({
    url: '/activityInfo/owner/record/list',
    type: '',
    data: {
      page: recordParmas.value.page + 1,
      pageSize: 10,
      activityId: optionsData.value.id
    }
  }).then(res => {
    if (res.code === 0) {
      recordParmas.value.list.push(...res.data.items)
      recordParmas.value.page = res.data.pagination.page
      recordParmas.value.more = res.data.pagination.more
      recordParmas.value.total = res.data.pagination.total_record
      recordParmas.value.totalAssistance = res.data.otherData.totalAssistanceValue
    }
  })
}
const openRankPopup = (type) => {
  if (!customerId.value) {
    gotoLogin()
    return false
  }
  currentSelectPopup.value = type
  rankPopup.value.open()
  if (type === 'rank') {
    rankParmas.value = {
      list: [],
      page: 0,
      more: true,
      total: -1,
      myOwner: 0
    }
    getRankDetail()
  }
  if (type === 'record') {
    recordParmas.value = {
      list: [],
      page: 0,
      more: true,
      total: -1,
      totalAssistance: 0
    }
    getInvolvedDetail()
  }
}
// 活动排行数据请求
const getRankDetail = () => {
  $https({
    url: '/activityInfo/owner/rank/list',
    type: '',
    data: {
      page: rankParmas.value.page + 1,
      pageSize: 10,
      activityId: optionsData.value.id
    }
  }).then(res => {
    if (res.code === 0) {
      rankParmas.value.list.push(...res.data.items)
      rankParmas.value.more = res.data.pagination.more
      rankParmas.value.page = res.data.pagination.page
      rankParmas.value.total = res.data.pagination.total_record
      rankParmas.value.myOwner = res.data.otherData.myOwner
    }
  })
}
const getCountdownTime = (startTime, endTime) => {
  startTime = startTime.replace(/-/g, '/')
  endTime = endTime.replace(/-/g, '/')
  const current = new Date(endTime) - new Date(startTime)
  countdownTime.value = {
    day: Math.floor(current / 1000 / 24 / 60 / 60),
    hour: Math.floor((current % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
    minute: Math.floor((current % (1000 * 60 * 60)) / (1000 * 60)),
    second: Math.floor((current % (1000 * 60)) / 1000),
    start: true
  }
}
//
const scrolltolower = (type) => {
  if (type === 'rank' && rankParmas.value.more) {
    getRankDetail()
  }
  if (type === 'record' && recordParmas.value.more) {
    getInvolvedDetail()
  }
}
const involveActivity = () => {
  if (!customerId.value) {
    gotoLogin()
    return false
  }
  eventSubscribe(true)
  if (pageData.value.timeStatus?.status === 3) {
    if (pageData.value.prize) {
      contactPopup.value.open()
    } else {
      storage.set(SHOW_TAB_TYPE, 'activity')
      uni.switchTab({
        url: '/pages/eventsList'
      })
    }
  } else {
    if (pageData.value.needAddPet) {
      currentOperatePopup.value = 'pet'
    } else {
      currentOperatePopup.value = 'poster'
    }
    getSelfPoster()
    operatePopup.value.open()
  }
}
const gotoActivity = () => {
  storage.set(SHOW_TAB_TYPE, 'activity')
  uni.switchTab({
    url: '/pages/eventsList'
  })
}
// 订阅
const eventSubscribe = (hidden) => {
  if (isSubscribe.value) {
    uni.showToast({
      title: '已订阅',
      icon: 'none'
    })
  } else {
    const tmplIds = ['Q23eeYUPFln9BUuy4PPGTXDD3EOpXYnYppcq-ecWjpI', '_F9LiltswNu2jbFhExiKYuOj-66j9VhzfQIbBOD0mGc', '60CXU-m1X3myY4Yge2j5SynqFOyd9MD2qOZMtkzuNaM']
    $subscribeMessage(tmplIds, (res) => {
      if (res && !hidden) {
        isSubscribe.value = true
        uni.showToast({
          title: '订阅成功',
          icon: 'none'
        })
      }
    })
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/minx.scss";
.container {
  background: #FFF8F0;
  width: 100vw;
  overflow: hidden;
  min-height: 100vh;
  padding-bottom: max(106px, calc(102px + env(safe-area-inset-bottom)));
}
.rank-box{
  position: fixed;
  left: 30rpx;
  right: 30rpx;
  background:#C9E7E6;
  font-size: 24rpx;
  color: #000;
  padding: 25rpx 30rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  height: 74rpx;
  z-index: 99;
  bottom: max(76px, calc(62px + env(safe-area-inset-bottom)));
  font-weight: bold;
  .right{
    display: flex;
  }
  .chart{
    position: relative;
    color: #324894;
  }
  .line{
    width: 1px;
    height: 22rpx;
    background-color: #324894;
    margin: 0 40rpx;
  }
}
.swiper-padding {
  position: relative;
  .swiper {
    height: 134vw;
    background: #ffffff;
  }
  .swiper-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
  }
  .introduce_img{
    height: 134vw;
    width: 100vw;
  }
  .view-title {
    color:#000;
    font-size: 40rpx;
    font-weight: bold;
    line-height: 60rpx;
    background-color: #ffffff;
    padding: 30rpx;
    // border-radius: 30rpx 30rpx 0 0;
    position: relative;
    // margin-top: -30rpx;
  }
  .dots{
    width: 100vw;
    position: absolute;
    bottom: 136rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    .dots-item{
      width: 10rpx;
      height: 10rpx;
      border-radius: 50%;
      margin: 0 6rpx;
      background-color: rgba(255,255,255,0.4);
      &.active{
        background-color: #fff;
      }
    }
  }
}
.view-base-rules{
  padding: 30rpx;
  font-size: 26rpx;
  line-height: 40rpx;
  color: #414141;
}
.booking_div {
  position: fixed;
  bottom: 0;
  height: max(70px, calc(56px + env(safe-area-inset-bottom)));
  width: 100%;
  background-color: #ffffff;
  left: 0;
  padding: 10rpx 30rpx 0 54rpx;
  z-index: 98;
  display: flex;
  justify-content: space-between;
  &::before{
    @include border(top, #ddd)
  }
  .opt-btn{
    background: rgba(0, 0, 0, 0);
    padding: 0;
    margin: 0 42rpx 0 0;
    font-size: 22rpx;
    line-height: 22rpx;
    margin-top: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .share-image {
      width: 53rpx;
      height: 53rpx;
      margin-bottom: 6rpx;
    }
  }
  .booking {
    width: 520rpx;
    height: 100rpx;
    background: #000;
    border-radius: 1000rpx;
    font-size: 11px;
    color: #FCDBAB;
    line-height: 22rpx;
    padding: 10rpx;
    display: flex;
    justify-content: space-between;
    line-height: 30rpx;
    text-align: center;
    align-items: center;
    .sbtn{
      width: 300rpx;
      height: 80rpx;
      border-radius: 1000px;
      background:#F0831E;
      font-size: 30rpx;
      font-weight: bold;
      color: #fff;
      &.over{
        background: #FCDBAB;
        color: #414141;
      }
    }
    .animate__pulse{
      width: 110rpx;
      height: 76rpx;
    }
  }
}
// .tab_nav {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   width: 250rpx;
//   height: 92rpx;
//   border-radius: 1000px;
//   background: #FFF;
//   box-shadow: 0px 0px 10px 0px rgba(252, 219, 171, 0.40);
//   margin: 40rpx auto;
//   padding: 6rpx;
//   .title_tabs{
//     height: 80rpx;
//     border-radius: 1000px;
//     color: #000;
//     font-weight: bold;
//     background: #FCDBAB;
//     width: 100%;
//   }
// }
.popup-prize{
  position: relative;
  width: 674rpx;
  height: 860rpx;
  top: -60rpx;
  .main-prize{
    transition: all .5s;
    width: 674rpx;
    height: 760rpx;
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0) scale(0) rotateY(-360deg);
    &.show{
      transform: translate(-50%, 0) scale(1) rotateY(0);
    }
    .text{
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      top: 226rpx;
      font-size: 38rpx;
      color: #414141;
      font-weight: bold;
    }
  }
  .img-anim{
    position: absolute;
    left: 50%;
    top: 50%;
    transition: all .5s;
    transform: translate(-50%, -50%);
    &.hidde{
      transform: translate(-50%, -50%) scale(0);
    }
  }
  .close{
    width:70rpx;
    height:70rpx;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -20rpx);
    bottom: 0;
    transition: all .5s 1s;
    opacity: 0;
    &.show{
      opacity: 1;
    }
  }
  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    &.show::before {
      content: "";
      display: block;
      position: absolute;
      top: -20px;
      left: -20px;
      right: -20px;
      bottom: -20px;
      border: 18px solid #FFF985;
      border-radius: 50%;
      animation: glowing 3s infinite linear 1.5s;
      opacity: 0;
    }
  }
}
.popup-content{
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  padding-top:90rpx;
  .main-box{
    background-color: #FFEBBF;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    &.rank-btm{
      background-image: url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_bg_bottom.png);
      background-repeat: no-repeat;
      background-position: center bottom;
      background-size: 100%;
    }
    .title{
      text-align: center;
      font-weight: bold;
      font-size: 30rpx;
      &.line{
        border-bottom: 1px solid rgba(0,0,0,0.08);
        margin: 0 40rpx;
        padding-bottom: 30rpx;
      }
    }
    .close{
      width: 80rpx;
      height: 80rpx;
      background: url(https://img.qumoyugo.com/webimgbg/picopino_activity_paihangban_close_btn.png) no-repeat;
      background-size: 100%;
      position: absolute;
      top: 0;
      left: 56rpx;
    }
  }
  .add-icon{
    width: 170rpx;
    height: 170rpx;
    border-radius: 30rpx;
    background-color: #fff;
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 70rpx auto;
    font-size: 24rpx;
    color: #3289CA;
  }
  .liji-it{
    position: relative;
    .cont{
      display: flex;
      padding: 20rpx 170rpx 60rpx 170rpx;
      align-items: center;
      justify-content: space-between;
    }
    .poster-img{
      width: 660rpx;
      height: 1100rpx;
      position: absolute;
      bottom: 46rpx;
      left: 45rpx;
      border-radius: 30rpx;
      overflow: hidden;
    }
  }
  .btn-cancle{
    font-size: 30rpx;
    color: #737373;
    line-height: 30rpx;
    border-top: 1px solid rgba(0,0,0,0.08);
    text-align: center;
    padding-top: 10rpx;
  }
  .download{
    border-radius: 1000px;
    background: #000;
    color: #F9C687;
    font-weight: bold;
    width: 200rpx;
    height: 70rpx;
  }
  .pet-add-image{
    width: 38rpx;
    height: 36rpx;
    margin-bottom: 10rpx;
  }
  .rank-list{
    padding: 40rpx 20rpx 0;
    box-sizing: border-box;
    .item{
      height: 110rpx;
      background: rgba(255,255,255,0.7);
      border-radius: 20rpx;
      display: flex;
      margin-bottom: 8rpx;
      padding: 0 30rpx;
      &.self-box{
        background: #C9E7E6;
        border: 1px solid #737373;
        font-weight: bold;
        color:#000;
      }
      .row{
        width:90rpx;
        text-align: center;
        font-weight: bold;
      }
      .user-info{
        display:flex;
        align-items: center;
        padding: 0 20rpx;
        flex:1;
        font-size: 24rpx;
      }
      .assis{
        width: 170rpx;
        font-size: 22rpx;
      }
    }
    .avatar{
      width: 70rpx;
      height: 70rpx;
      border-radius: 50%;
      margin-right: 10rpx;
    }
  }
  .help-list{
    background: rgba(255,255,255,0.7);
    border-radius: 20rpx;
    line-height: 64rpx;
    .help-title{
      height: 64rpx;
      background: #F1F1F1;
      font-weight: bold;
      color: #414141;
      display: flex;
      justify-content: space-between;
      padding-left: 30rpx;
      font-size: 22rpx;
    }
    .help-item{
      display: flex;
      justify-content: space-between;
      padding: 25rpx 0 25rpx 30rpx;
      line-height: 40rpx;
      font-size: 24rpx;
    }
    .name{
      width: 200rpx;
    }
    .time{
      width: 300rpx;
    }
    .num{
      width: 120rpx;
    }
  }
}
#canvasImg {
  visibility: hidden;
  position: absolute;
  left: -200%;
  top: -300%;
}
:deep(.booking_div .uni-countdown__splitor){
  margin: 0;
}
:deep(.booking_div .uni-countdown__number){
  width: auto !important;
}
@keyframes glowing {
  0% { opacity: 1; transform: scale(1); filter: blur(1px)}
  100% { opacity: 0; transform: scale(4); filter: blur(10px)}
}
</style>
